import { Meta, Canvas, Story } from '@storybook/blocks';
import * as PasswordStories from './Password.stories';

<Meta of={PasswordStories} />

# Password input field

Input elements with type ‘password’ provide a way for the user to securely enter a password. The text is hidden so that it cannot be read, usually by replacing each character with a symbol such as the asterisk.

### Description

- Always associate a label to every password field for good accessibility. Do not include a colon at the end of the label.
- The password input must have a valid value before the form can be submitted.
- The password input should include a show/hide option to show/hide password.
- The length of the input text provides a hint to users as to how much text to write.
- A password input text only allows for a single line of input.
- It should have a password strength indicator below.
- It should include a text with a hint describing the expected value in the password.

### Default

<Canvas of={PasswordStories.Default} />

### Required

<Canvas of={PasswordStories.Required} />

### Random

<Canvas of={PasswordStories.Random} />

### Autocomplete

<Canvas of={PasswordStories.Autocomplete} />
